<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="list">
        <div class="item" v-for="(item,label,index) in color_list" :key="index">
            <div class="color_box" :style="{background: item}"></div>
            <div class="label"> {{label}}</div>
            <div class="name">{{dictionary[label]}}</div>
        </div>
    </div>
    <div class="list">
        <div class="item" v-for="(item,label,index) in new_color" :key="index">
            <div class="color_box" :style="{background: item}"></div>
            <div class="label"> {{label}}</div>
            <div class="name">{{dictionary[label]}}</div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data() {
            const dictionary = {
                '--view-theme': '主题色',
                '--view-theme-16': '#主题色',
                '--view-priceColor': '价格颜色',
                '--view-minorColor': '主题透明.5',
                '--view-minorColorT': '主题透明.1',
                '--view-bntColor': '按钮色',
                '--view-op-ten': '主题透明.1',
                '--view-main-start': '开始',
                ' --view-main-over': '结束',
                '--view-op-point-four': '第四点色',
                '--view-op-point-eight': '第八点色',
                '--view-linear': '渐变色',
            }
            return {
                dictionary,
                color_list: {},
                new_color: {},
                newText: ''
            }
        },
        mounted() {
            const color = '--view-theme: rgba(255,68,143,1);--view-theme-16:#ff448f;--view-priceColor:#FF448F;--view-minorColor:rgba(255, 68, 143, 0.5);--view-minorColorT:rgba(255, 68, 143, 0.1);--view-bntColor:#282828;--view-op-ten: rgba(255,68,143, 0.1);--view-main-start:#FF67AD; --view-main-over:#FF448F;--view-op-point-four: rgba(255,68,143, 0.04);--view-op-point-eight: rgba(255,68,143, 0.8);--view-linear:linear-gradient(180deg, rgba(255,68,143,0.2) 0%, rgba(255,255,255,0) 100%);'
            this.initColor(color)
            this.setNewColor()
        },
        methods: {
            initColor(color) {
                const list = color.split(';')
                list.forEach(item => {
                    this.color_list[item.split(':')[0]] = item.split(':')[1]
                })
                this.$forceUpdate()
            },
            setNewColor() {
                this.new_color = {
                    '--view-theme': 'rgba(40,53,83, 1)',
                    '--view-theme-16': '#283553',
                    '--view-priceColor': '#2F3440',
                    '--view-minorColor': 'rgba(40,53,83, .5)',
                    '--view-minorColorT': 'rgba(40,53,83, .1)',
                    '--view-bntColor': '#2F3440',
                    '--view-op-ten': 'rgba(40,53,83, .1)',
                    '--view-main-start': '#2F3440',
                    ' --view-main-over': '40,53,83',
                    '--view-op-point-four': 'rgba(40,53,83, .4)',
                    '--view-op-point-eight': 'rgba(40,53,83, .8)',
                    '--view-linear': 'linear-gradient(180deg, rgba(40,53,83,0.2) 0%, rgba(255,255,255,0) 100%)',
                }
                const color = '--view-theme: rgba(255,68,143,1);--view-theme-16:#ff448f;--view-priceColor:#FF448F;--view-minorColor:rgba(255, 68, 143, 0.5);--view-minorColorT:rgba(255, 68, 143, 0.1);--view-bntColor:#282828;--view-op-ten: rgba(255,68,143, 0.1);--view-main-start:#FF67AD; --view-main-over:#FF448F;--view-op-point-four: rgba(255,68,143, 0.04);--view-op-point-eight: rgba(255,68,143, 0.8);--view-linear:linear-gradient(180deg, rgba(255,68,143,0.2) 0%, rgba(255,255,255,0) 100%);'
                for (let key in this.new_color) {
                    this.newText += `${key}:${this.new_color[key]};`
                }
                // this.newText = JSON.stringify(this.new_color).replace(/"/g, '')
                console.log(this.newText)
            }
        }
    })
</script>
<style>
    .list {
        display: flex;
    }

    .item {
        margin-right: 50px;
    }

    .item .color_box {
        width: 100px;
        height: 100px;
    }
</style>
